<template>

  <el-drawer :title="title" :visible.sync="open" direction="rtl" size="220mm" :before-close="cancel">
    <!-- <div class="drawer-border"> -->
    <plan-details-view ref="planDetailsView" :planId="planId" />
    <!-- </div> -->
  </el-drawer>

</template>

<script>
import { getMaterialPlanDetails } from "@/api/ma/materialPlan";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import planDetailsView from './planDetailsView.vue';
export default {
  components: { planDetailsView },
  name: "MaterialPlanDetailsView",
  data () {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "查看报表",
      // 是否显示弹出层
      open: false,
      // 查询参数
      planId: undefined,
      // 表单参数
      form: {
        detailList: [],
        infoData: {}
      },
      printLoading: false,
      exportPercentage: 0, // 初始进度值
      status: "active" // 进度条状态
    };
  },
  created () {
  },
  methods: {
    init (planId) {
      this.planId = planId;
      this.open = true;
    },

    // 取消按钮
    cancel () {
      this.open = false;
      this.$refs.planDetailsView.cancel();
    },
  }
};
</script>
<style lang="scss" scoped>
.drawer-border {
  padding: 5mm;
  position: relative;
}

.view-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
}

.view-subtitle {
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
}

.print {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // position: absolute;
  // bottom: 0;
  // z-index: 999;
  background-color: #fff;
  width: 100%;
  padding: 10px 20px;

  ::v-deep {
    .el-progress-bar {
      width: 300px !important;
    }

    .el-progress-bar__outer {
      height: 15px !important;
    }

    .el-progress-bar__inner {
      background-color: #409eff;
      background-image: -webkit-linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      background-image: -o-linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      background-image: linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      -webkit-background-size: 1rem 1rem;
      background-size: 1rem 1rem;
      animation: 2s linear infinite pbs;
      animation-iteration-count: 10;
    }

    @keyframes pbs {
      0% {
        background-position-x: 1rem;
      }
    }
  }
}
</style>
